<template>
  <el-table
    class="order_table"
    @row-click="clickOrdertableRow" height="100%"
    @expand-change="clickOrdertableRow"
    stripe
    :data="list"
    :row-class-name="ordertableRowClass"
    :row-key="getRowKeys"
    :expand-row-keys="orderExpands"
    v-loading="loading"
  >
    <el-table-column label="" width="30" show-overflow-tooltip>
      <template #default="scope">
        <div>
          <img style="width: 8px" src="@/assets/home/task-success.png" v-if="scope.row.place_status == 2" />
          <img style="width: 8px" src="@/assets/home/task-fail.png" v-else />
        </div>
      </template>
    </el-table-column>
    <el-table-column type="expand">
      <template #default="scope">
        <div class="expand_table">
          <TableDown
            :list="downtableData"
            :profit_rate="scope.row.profit_rate"
            :is_win="scope.row.is_win"
            @change="changesign"
            :task_type="task_type"
          />
        </div>
      </template>
    </el-table-column>
    <!-- :width="flexColumnWidth('任务名称', 'task_name', 'string', 40)" -->
    <el-table-column label="任务名称" width="100" show-overflow-tooltip prop="task_name">
      <template #default="scope">
        <div>{{ rceptTakname(scope.row.task_name) }}</div>
      </template>
    </el-table-column>
    <!-- :width="flexColumnWidth('开赛时间', 'match_time', 'string', 40)" -->
    <el-table-column label="开赛时间" width="170" show-overflow-tooltip prop="match_time" />
    <!-- :width="flexColumnWidth('联赛', 'away_name', 'string', 20)" -->
    <el-table-column label="联赛" width="140" show-overflow-tooltip prop="league_name" />
    <!-- :width="flexColumnWidth('主队', 'home_name', 'string', 40)" -->
    <el-table-column label="主队" width="160" show-overflow-tooltip align="right" prop="home_name" />
    <el-table-column label="" width="30" align="center" show-overflow-tooltip>
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <img style="width: 16px; height: 16px" src="@/assets/home/vs.png" />
        </div>
      </template>
    </el-table-column>
    <!-- :width="flexColumnWidth('客队', 'league_name', 'string', 40)" -->
    <el-table-column label="客队" width="160" show-overflow-tooltip prop="away_name" />
    <!-- :width="flexColumnWidth('平台', 'bc_types', 'array', 100)" -->
    <el-table-column label="平台" width="120" show-overflow-tooltip>
      <template #default="scope">
        <div style="display: flex; flex-direction: column">
          <div
            v-for="(item, index) in scope.row.bc_types"
            :key="index"
            style="display: flex"
            :style="index + 1 != scope.row.bc_types.length ? 'margin-bottom: 4px;' : ''"
          >
            <div class="pt_index" v-if="scope.row.bc_types.length > 1">{{ index + 1 }}</div>
            <div :style="scope.row.bc_types.length > 1 ? 'margin-left: 8px' : ''">
              {{ bctypeLabel(item) }}
            </div>
          </div>
        </div>
      </template>
    </el-table-column>
    <!-- :width="flexColumnWidth('盘口', 'pk_odds_keys_ch', 'array', 30)" -->
    <el-table-column label="盘口" width="130" show-overflow-tooltip>
      <template #default="scope">
        <div style="display: flex; flex-direction: column">
          <div
            v-for="(item, index) in scope.row.pk_odds_keys_ch"
            :key="index"
            :style="index + 1 != scope.row.pk_odds_keys_ch.length ? 'margin-bottom: 4px;' : ''"
          >
          <div>
            <div>{{ item }}</div>
          </div>
            
          </div>
        </div>
      </template>
    </el-table-column>
    <!-- :width="flexColumnWidth('下单金额', 'stakes', 'array', 40)" -->
    <el-table-column label="下单金额" align="right">
      <template #default="scope">
        <div style="display: flex; flex-direction: column">
          <div
            v-for="(item, index) in scope.row.stakes"
            :key="index"
            :style="
              index + 1 != scope.row.stakes.length
                ? 'margin-bottom: 4px;font-weight: bold;'
                : 'font-weight: bold;'
            "
          >
            {{ item }}
          </div>
        </div>
      </template>
    </el-table-column>
   
  </el-table>
  <SignDialog v-model="signdialogshow" :data="signdata" />
  <ImgDialog v-model="imgdialogshow" :data="signdata"/>
</template>

<script setup>
import TableDown from './TableDown.vue'
import SignDialog from './tablelist/SignDialog.vue'
import ImgDialog from "./tablelist/ImgDialog.vue";
const emits = defineEmits(['change'])
const props = defineProps({
  list: Object,
  loading: Boolean,
  task_type: String,
})


const signdialogshow = ref(false)
const imgdialogshow = ref(false)
const signdata = ref({})
const bc_types = inject('bc_types')
const orderExpands = ref([])
const downtableData = ref([])

const changesign = data => {
  if (data.type == 'opensign') {
    signdata.value = data.data
    signdialogshow.value = true
  } else if (data.type == 'openimg') {
    signdata.value = data.data
    imgdialogshow.value = true
  }
}

const getRowKeys = row => {
  let index = props.list.findIndex(item => item === row)
  return index
}

const ordertableRowClass = data => {
  if (data.rowIndex == orderExpands.value[0]) {
    return 'expand_order_table_row'
  }
}

const clickOrdertableRow = row => {
  let index = props.list.findIndex(item => item === row)

  if (orderExpands.value[0] == index) {
    orderExpands.value = []
  } else {
    orderExpands.value = []
    downtableData.value = row.order_data
    if (orderExpands.value.includes(index)) {
      orderExpands.value = orderExpands.value.filter(val => val !== index)
    } else {
      orderExpands.value.push(index)
    }
  }
}

// 获取中文名
const bctypeLabel = value => {
  let name = ''
  bc_types.value.forEach(item => {
    if (item.bc_type == value) {
      name = item.name
    }
  })
  return name
}

// 截取任务名称
const rceptTakname = value => {
  let result = ''

  if (value != null && value != undefined) {
    result = value.split(':')[0]
  } else {
    result = ''
  }
  return result
}

const flexColumnWidth = (label, prop, type, widthnum) => {
  let arr = []
  if (type == 'string') {
    // let arr1 = props.list.map(x => x[prop])
    let arr1 = []
    if (prop == 'task_name') {
      arr1 = props.list.map(x => rceptTakname(x[prop]))
    } else {
      arr1 = props.list.map(x => x[prop])
    }
    arr = arr1
  } else if (type == 'array') {
    let arr1 = []
    if (prop == 'bc_types') {
      arr1 = props.list.map(x => bctypeLabel(x[prop]))
    } else {
      arr1 = props.list.map(x => x[prop])
    }
    arr = arr1.flat()
  }

  arr.push(label) // 把每列的表头也加进去算
  let allwidthnum = getMaxLength(arr) + widthnum
  if (prop == 'home_name' || prop == 'league_name') {
    if (allwidthnum > 180) {
      allwidthnum = 180
    }
  }
  if (prop == 'away_name') {
    if (allwidthnum > 130) {
      allwidthnum = 130
    }
  }
  let width = allwidthnum + 'px'
  return width
}

const getMaxLength = arr => {
  return arr.reduce((acc, item) => {
    if (item) {
      const calcLen = getTextWidth(item)
      if (acc < calcLen) {
        acc = calcLen
      }
    }
    return acc
  }, 0)
}
const getTextWidth = str => {
  let width = 0
  const html = document.createElement('span')
  html.innerText = str
  html.className = 'getTextWidth'
  document.querySelector('body').appendChild(html)
  width = document.querySelector('.getTextWidth').offsetWidth
  document.querySelector('.getTextWidth').remove()
  return width
}
</script>



<style lang="scss" scoped>
.expand_table {
  padding: 0 8px 8px 8px;
  background-color: rgba(71, 172, 255, 0.1);
}

::v-deep .pt_index {
  width: 16px;
  height: 16px;
  background-color: #778090;
  color: #fff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 2px;
}
</style>

<style>
.order_table .el-table__expand-icon .el-icon {
  display: none !important;
}

.order_table .el-table__expand-icon {
  content: url('@/assets/order/zhankai.png') !important;
  transform: rotate(0deg) !important;
}
.order_table .el-table__expand-icon--expanded {
  content: url('@/assets/order/shouqi.png') !important;
  transform: rotate(0deg) !important;
}
.order_table tbody tr:hover {
  background-color: none !important;
}
.order_table .el-table__row--striped {
  background-color: #fafafa;
}
.order_table .el-table__expanded-cell {
  padding: 0;
  border-radius: 0 0 8px 8px !important;
}
.order_table .el-table__expanded-cell:hover,
.order_table .el-table__expanded-cell {
  background-color: rgba(71, 172, 255, 0.1) !important;
}
.order_table .cell {
  padding: 0 8px;
}

.order_table thead tr th:last-child .cell,
.order_table tbody tr td:last-child .cell {
  padding: 0 18px;
}

.order_table .el-table__inner-wrapper tr:hover {
  background: none !important;
}

/* .order_table2 .cell {
  padding: 0 6px;
}
.order_table2 thead tr th:last-child .cell,
.order_table2 tbody tr td:last-child .cell{
    padding: 0 6px;
}
.order_table2 thead tr th {
  background: none !important;
  border: none !important;
}
.order_table2 .el-table__body tr:hover .el-table__cell,
.order_table2 .el-table__inner-wrapper tr:hover {
  background: none !important;
}
.order_table2 thead tr th .cell {
  color: #778090 !important;
}
.order_table2 tbody tr td {
  padding: 6px 0 !important;
} */
.expand_order_table_row,
.expand_order_table_row td {
  background-color: rgba(71, 172, 255, 0.1) !important;
}
.expand_order_table_row .el-table__cell:first-child {
  border-radius: 8px 0 0 0 !important;
}
.expand_order_table_row .el-table__cell:last-child {
  border-radius: 0 8px 0 0 !important;
}
</style>
